<template lang="html">
  <div class="container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="16" class="recinfo" v-if="cookbook!=''?true:false">
        <div class="bokpic">
          <img :src="cookbook.finalcook" alt="" class="fitImg">
        </div>
        <div class="falisc">

          <span class="share el-icon-view">  {{cookbook.pageview}}</span>
           <el-button v-if="cookbook.isoff == false" type="" plain class="el-icon-star-off offClass" @click="staroff"><label style="font-size: 12px;"> {{cookbook.staroffs.length}}</label></el-button>
          <el-button v-else type="" plain class="el-icon-star-on offClass" @click="delstaroff"><label style="font-size: 12px;"> {{cookbook.staroffs.length}}</label></el-button>
        </div>

        <h1>{{cookbook.cbname}}</h1>


        <div class="retew">
          <div class="auth">
            <img :src="cookbook.user.headimage" alt="">
            <span>{{cookbook.user.petname}}</span>
            <span>{{cookbook.ordertime}}</span>
          </div>
          <div class="xdescribe">
            {{cookbook.cbdescribe}}
          </div>
          <table border="0" cellspacing="0" cellpadding="0" class="retamr">
            <tr class="mtim">
              <td class="lirre" width="50%"><span class="fwb">难度：</span>{{cookbook.cbdifficulty.difficulty}}</td>
              <td>
                <span class="fwb">时间：</span>{{cookbook.cbtime.times}}
              </td>
            </tr>
            <tr class="mtim">
              <td width="50%">
                <h3 class="zfliao" style="color: chocolate;">食材</h3>
              </td>
              <td class="relative"></td>
            </tr>

            <tr width="50%" v-for="(cb,index) in cookbook.cbmainList" :key="index" v-if="index%2==0?true:false">
                <td class="lirre">
                  <span>
                    <label v-if="cookbook.cbmainList.length - cookbook.cbtrimList.length > index ">{{cb.main}}</label>
                     <label v-else>{{cb.trims}}</label>
                    </span>
                    <span class='right'>{{cb.levels}}</span>
                </tsd>
                <td>
                  <span
                    v-if="cookbook.cbmainList.length>index+1">
                     <label v-if="cookbook.cbmainList.length - cookbook.cbtrimList.length > index + 1"> {{cookbook.cbmainList[index+1].main }}</label>
                     <label v-else> {{cookbook.cbmainList[index+1].trims}}</label>
                   </span>
                    <span class='right'  v-if="cookbook.cbmainList.length > index +1">{{cookbook.cbmainList[index+1].levels}}</span>
                </td>
              </tr>
          </table>
          <div class="itemstep">

            <el-row class="stepcont" :gutter="15" v-for="(dl,index) in cookbook.detailsList" :key="index">
              <el-col :span="9" class="thumbnailImg">
                <img :src="dl.image" alt="" class="thumbnailImg"/>
               </el-col>
                           <el-col :span="15">
                              <p>
                                <span class="fwb">{{dl.step}}</span>
                              {{dl.describes}}
                              </p>
                            </el-col>
                          </el-row>
                          </div>
                          <div class="xtip">
                            <h3>小贴士</h3>
                            <p>
                              {{cookbook.suggest}}
                            </p>
                          </div>
          <div class="authortip">
            ©本菜谱的做法由 {{cookbook.user.petname}} 编写，未经授权不得转载【欢乐美食】
          </div>
        </div>

      </el-col>
      <el-col :xs="24" :sm="16" v-else>
        没有数据
      </el-col>
      <el-col :xs="24" :sm="8">
        <div class="adsHear">
          <img src="../../assets/img/logo.png" alt="" class="fitImg">
        </div>
        <!-- <div class="top10">
          <h3>十大热门菜谱</h3>
          <ul class="clearfix">
            <el-row :gutter="20">
              <el-col :span="9">
                <router-link :to="{name: 'Itemlist', params: {foodId: topFood.fid}}" target="_blank"><img class="fitImg"
                    :src="topFood.fimg" :alt="topFood.fname"></router-link>
              </el-col>
              <el-col :span="15">
                <router-link :to="{name: 'Itemlist', params: {foodId: topFood.fid}}" target="_blank">{{topFood.fname}}
                </router-link>
                <p></p>
              </el-col>
            </el-row>
            <li :class="index==0?'btnone':''" v-for="(item, index) in topFood.flist" :key="item.fid">
              <router-link :to="{name: 'Itemlist', params: {foodId: item.fid}}" target="_blank">{{item.fname}}
              </router-link>
            </li>
          </ul>
        </div>
        <div class="topSearch">
          <h2>人气搜索</h2>
          <ul class="clearfix">
            <li v-for="(item, index) in topSearchList" :key="item" :class="index%2==0?'':'brone'">
              <router-link :to="{name: 'Foodlist', params: {keywords: item, classId: 0}}" target="_blank">{{item}}
              </router-link>
            </li>
          </ul>
        </div>
        <div class="topSearch" style="margin-top: 20px;">
          <h2>评论</h2>
          <div class="retew">
            <div>
              <div class="auth">
                <img :src="detailsList.headimgurl" alt="">
                <span>{{detailsList.author}}</span>
                <span>2017-10-17</span>
              </div>
              <div class="xdescribe">
                {{detailsList.describe}}
              </div>
            </div>
            <div>
              <div class="auth">
                <img :src="detailsList.headimgurl" alt="">
                <span>{{detailsList.author}}</span>
                <span>2017-10-17</span>
              </div>
              <div class="xdescribe">
                {{detailsList.describe}}
              </div>
            </div>

            <el-form class="demo-form-inline">
              <el-form-item>
                <el-input type="textarea"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>

import axios from 'axios'

export default {
    data() {
      return {
        foodId: '',
        cookbook:'',
        topSearchList: [
          // 人气搜索
        ],
        topFood: {
          fid: 40,
          fname: '老干妈烧带鱼',
          fimg: ' ',
          flist: [],
        },
    }
    },
    components:{
      // 子组件
    },
    async created() {
      // 生命周期函数
    //根据cbid查询本菜谱
    let id = this.$route.params.foodId
    var url = '/api/consumer-index/index_consumer/getCookBookBycbid/' + id
    axios.get(url).then(res =>{
     res.data.cbmainList =  res.data.cbmainList.concat(res.data.cbtrimList)
      this.cookbook = res.data
      console.log(res.data)
      this.isstaroff(id) // 判断是否收藏
     setTimeout(function(){
     let url = '/api/consumer-index/index_consumer/addCookBookView/' + id
     axios.get(url).then(res =>{
       console.log(res.data)
     })
     },3000)

    })
    },
 methods:{
   //收藏和取消收藏
        staroff: function(){
          let url = '/api/consumer-index/around_consumer/staroff?' + 'uid=' + this.$store.state.user.uid + '&cbid=' + this.cookbook.cbid
          axios.get(url).then(res => {
            console.log(res.data)
            this.cookbook.isoff = true
            this.cookbook.staroffs.length = this.cookbook.staroffs.length + 1
          })
        },

        delstaroff:function(){
          let url = '/api/consumer-index/around_consumer/delstaroff?' + 'uid=' + this.$store.state.user.uid + '&cbid=' + this.cookbook.cbid
          axios.get(url).then(res => {
            console.log(res.data)
             this.cookbook.isoff = false
             this.cookbook.staroffs.length = this.cookbook.staroffs.length - 1
          })
          },
        //是否收藏
        isstaroff: function(cbid){
          let url = '/api/consumer-index/around_consumer/isstaroff?' + 'uid='+this.$store.state.user.uid + '&cbid='+cbid
          console.log(url)
          axios.get(url).then(res => {
             this.cookbook.isoff = res.data
            console.log(res.data)
          })
        }

 }
}
</script>

<style lang="css">
  .bokpic {
    height: 400px;
    margin-bottom: 26px;
    box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
  }

  .recinfo h1 {
    font-size: 24px;
    margin-bottom: 26px;
  }

  .recinfo .falisc {
    margin-bottom: 26px;
  }

  .recinfo .falisc span {
    color: #a37011;
    font-size: 24px;
    padding-right: 3px;
  }

  .recinfo .falisc span:nth-child(2) {
    padding-left: 40px;
  }

  .recinfo .falisc .save,
  .recinfo .falisc .share {
    width: 80px;
    height: 32px;
    background-color: #FFB319;
    color: #fff;
    vertical-align: middle;
    line-height: 32px;
    font-size: 12px;
    text-align: center;
    margin-left: 14px;
    border-radius: 3px;
    float: right;
  }
.offClass{
  width: 80px;
  height: 32px;
  line-height: 0px;
float: right;

}
  .adsHear {
    width: 100%;
    height: 250px;
    background: #fff;
    margin-bottom: 30px;
    box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
  }

  .retew {
    background: #fff;
    width: 100%;
    font-size: 14px;
    box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
    -webkit-box-shadow: 0px 1px 3px rgba(100, 100, 100, 0.3);
    border-radius: 3px;
    margin-bottom: 20px;
    padding-bottom: 25px;
  }

  .retew .auth {
    padding: 20px;
    /*margin-bottom: 20px;*/
  }

  .retew .auth img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /*border:1px solid #666;*/
    margin-right: 15px;
    vertical-align: top;
  }

  .retew .auth span:nth-child(3) {
    float: right;
  }

  .xdescribe {
    line-height: 180%;
    text-indent: 2em;
    padding: 0 20px 20px 20px;
  }

  /*******表格********/
  .retamr {
    margin-left: 1px;
    border-bottom: 1px solid #e5e5e5;
    color: #999;
    width: 100%;
    margin-bottom: 30px;
  }

  .retamr span {
    padding-right: 10px;
  }

  .retamr td {
    border-top: 1px solid #e5e5e5;
    padding: 12px 0 12px 20px;
  }

  .retamr ul {
    width: 100%;
  }

  .retamr li {
    width: 50%;
    border-top: 1px solid #e5e5e5;
    padding: 12px 0 12px 20px;
    box-sizing: border-box;
  }

  .retamr .mtim {
    background: #f8f8f8;
    color: #333;
  }

  .lirre {
    border-right: 1px solid #e5e5e5;
  }

  .retamr span {
    padding-right: 10px;
  }

  .itemstep {
    font-size: 14px;
    color: #333;
    padding: 0 20px;
    margin-bottom: 30px;
  }

  .itemstep h2 {
    font-weight: bold;
  }

  .itemstep .stepcont {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #e5e5e5;
  }

  .itemstep p {
    line-height: 180%;
    word-wrap: break-word;
    text-align: justify;
  }

  .itemstep .thumbnailImg {
    height: 150px;
  }

  .xtip {
    margin: 0 20px 15px 20px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #e5e5e5;
  }

  .xtip h3 {
    margin-bottom: 11px;
    font-weight: bold;
  }

  .xtip p {
    line-height: 180%;
  }

  .authortip {
    font-size: 12px;
    line-height: 30px;
    margin-left: 20px;
    color: #999;
  }

  /*******右侧****/
  .top10 {
    margin-bottom: 30px;
  }

  .top10 h3 {
    font-size: 14px;
    width: 300px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    display: inline-block;
  }

  .top10 h3 span {
    font-size: 12px;
  }

  .top10 ul {
    /*width: 260px;*/
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ebebea;
    padding: 20px 20px 5px 20px;
  }

  .top10 .shxs {
    margin-top: 19px;
    height: 90px;
  }

  .top10 li {
    width: 100%;
    height: 44px;
    line-height: 44px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 5px;
    border-top: 1px solid #ebebea;
  }

  .topSearch h2 {
    font-size: 14px;
    padding-bottom: 3px;
    margin-bottom: 5px;
    display: inline-block;
  }

  .topSearch h2 span {
    font-size: 12px;
  }

  .topSearch ul {
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ebebea;
    padding: 7px 20px;
  }

  .topSearch li {
    box-sizing: border-box;
    width: 50%;
    height: 44px;
    line-height: 44px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 10px;
    border-top: 1px solid #ebebea;
    border-right: 1px solid #ebebea;
  }

  .topSearch li:first-child,
  .topSearch li:nth-child(2) {
    border-top: none !important;
  }
</style>
